<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/myJS/myJS.js"></script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/index.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">

    <div class="container strategyComment" >
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="/userProfiles.html?id=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <span class="comment-star" render-key="starNum" render-fun="getStar">

                </span>

                <span class="comment-date" render-html="commendTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="imgs">
                    <li>
                        <img render-src="imgs.self">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-href="/strategyCatalogs.html?id=" render-key="strategy.id" render-fun="getHref" >
                        <img render-src="strategy.coverUrl"><span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>

            </div>
        </div>


    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span>0</span></div>
        <div class="p-2">赞<span>0</span></div>
    </div>

    <div class="commentinner">
        <div  render-loop="list" style="margin:16px;">
            <div class="postall" style="padding: 10px">
                <div class="post_t">
                    <a data-href="/userProfiles.html?id=" render-fun="getHref" render-key="list.user.id">
                    <img render-src="list.user.headImgUrl" width="30px"></a>
                    <span style="top: 4px" render-html="list.user.nickName"></span>
                </div>
                <div class="contentDiv" render-key="list.id" render-fun="getReplyId">
                    <p class="animated fadeInRight content" render-html="list.content"></p>
                    <div class="post_m ">
                        <div class="msgBlock">
                            <a class="replyBtn"  render-key="list.user.id" render-fun="getByReplyId"  role="button" style="margin-left: 230px;margin-right: 3px">回复</a>
                        </div>
                    </div>
                    <div render-loop="list.replys">
                        <div><span render-html="list.replys.replier.nickName"></span>回复了<span render-html="list.replys.byReply.nickName"></span>:<span render-html="list.replys.content"></span></div>
                    </div>
                </div>
                <label class="puff_right" render-html="list.commendTime" style="margin-left: 120px;margin-right: 3px"></label>
            </div>
        </div>
    </div>
    <div></div>
    <div class="form-control play" style="display: none;">
        <input class="form-control" name="reply" ><button type="button" class="saveBtn" style="margin-left:250px">回复</button></input>
    </div>
    </div>
</div>

<div class="comment-list">
    快来发表你的评论吧
</div>

<div class="operation">
    <div class="p-2 commenting" style="text-align: center;width: 100%;position: relative;background:#4D4C4B">
        <i class="fa fa-commenting-o" style="width: 20px;position: absolute;left:3%;top: 30%;color: white"></i>
        <textarea style="width: 80%;height: 30px;font-size: 10px;text-align: left"
                  class="form-control-lg" placeholder="hui" id="content"></textarea>
        <i style="position: absolute;top:27%;left:90%;color:white" id="send">发送</i>
    </div>
</div>

<script>
    var param = getParams();
    var currentPage = 1;
    var pages;
    var store = [];
    var user = JSON.parse(sessionStorage.getItem("user"));
    //回显
    $.get("strategyComments/" + param.id, function (data) {
        $(".comment .row").renderValues(data,{
            getHref: function (item, value) {
                $(item).attr("href", $(item).data("href") + value)
            },
            getStar:function (item,value) {
                star(item,value);
            }
        })
    });
    //获取评论
    var byReplyId;
    var parentId;
    var src;
    function query() {
        $.get("/commendReplys/"+param.id,{"pageSize":5,"currentPage":currentPage},function (data) {
            $.merge(store,data.list);
            $(".commentinner").renderValues({"list":store},{
                getHref: function (item, value) {
                    $(item).attr("href", $(item).data("href") + value);
                },
                getByReplyId:function (item,value) {
                   $(item).attr("data-id",value);
                },getReplyId:function (item,value) {
                    $(item).attr("data-id",value);
                }

            });
            currentPage ++;
            pages = data.pages;
            $(".replyBtn").click(function (){
                parentId = $(this).closest("div.contentDiv").data("id");
                byReplyId = $(this).data("id");
                src = $(this);
                $(".play").css("display","block");

            });
        });

    }




        $(".saveBtn").click(function () {
            var reply = {
                "byReply.id":byReplyId,
                "replier.id":user.id,
                "content":$("input[name='reply']").val()
            };

            $.post("/commendReplys/"+parentId+"/replys",reply,function (data) {
                temp = '<div><span>'+data.replier.nickName +'</span>' + '回复了' + '<span>'+data.byReply.nickName +'</span>'+':'+'<span>'+data.content+'</span></span>'+'</div>';
                src.closest("div.contentDiv").append(temp);
            });
            $(".play").css("display","none");
            $("input[name='reply']").val("");

        });



    query();
    //添加评论
    $("#send").click(function () {
        if(!user){
            checkLogin();
        }
        var commendReply = {
            "content":$("input[name='content']").val(),
            "strategyComment.id":param.id,
            "user.id":user.id

        };
        $.post("/commendReplys",commendReply,function (data) {
            window.location.reload();
        })
    });

    $(window).scroll(function () {
        //页面滑动查询
        if (($(window).height() + $(document).scrollTop()) >= $(document).height()) {
            if (currentPage <= pages) {
                query();
            } else {
                $(document).dialog({
                    type: 'notice',
                    infoText: '已经到底了',
                    autoClose: 1500,
                    position: 'bottom'  // center: 居中; bottom: 底部
                });
            }

        }
    });

    //回复按钮


</script>


</body>

</html>